<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojox.image.Lightbox Tests | The Dojo Toolkit</title>

	<!-- required: a default theme file -->
	<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/tundra/tundra.css">
	<link rel="stylesheet" href="../resources/image.css">
	
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/tests/css/dijitTests.css"; 
		body, html { width:100%; height:100%; margin:0; padding:0; } 
		
		#customTitleThing {
			height:75px;
			border:1px solid #ededed;
			overflow:auto;
			width:92%;
		}
	</style>
	
	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>

	<!-- do not use! only for testing dynamic themes -->
	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>

	<!-- for debugging: -->
	<script type="text/javascript" src="../Lightbox.js"></script>
	<script type="text/javascript">
		dojo.require("dijit.form.Button");
		dojo.require("dojox.image.Lightbox"); 
		dojo.require("dojox.data.FlickrStore");
		dojo.ready(function(){
			// sample with super-rich text content (no widgets or undelegated events please).
			
			var title = dojo.byId("customExample").innerHTML;
			dojo.empty("customExample");
			
			var lb = new dojox.image.Lightbox({
				href:"images/square.jpg",
				title: title
			});
			lb.startup();
			
			new dijit.form.Button({
				onClick: function(){
					lb.show();
				},
				label:"Custom HTML"
			}).placeAt("container");
			
			// and example that has events:
			var elb = new dojox.image.LightboxDialog({});
			elb.connect(elb.textNode, "onclick", function(e){
				e.preventDefault();
				elb.show({
					leaveTitle:true,
					href: dojo.attr(e.target, "href")
				});
			})
			elb.startup();
			
			var content = "<a href='images/chris1_lg.jpg'>chris1<a/>"  
				+ " | <a href='images/chris2_lg.jpg'>chris2</a>"
				+ " | <a href='images/chris3_lg.jpg'>chris3</a>"
			;
				
			new dijit.form.Button({
				onClick:function(){
					elb.show({
						title:content,
						href:"images/chris1_lg.jpg"
					});
				},
				label:"Custom Links"
			}).placeAt("container");
			
			// and example of onClick for the image (to hide the lightbox);
			var clb = new dojox.image.Lightbox({
				title:"fun fun fun",
				href:"images/chris1_lg.jpg",
				onClick: function(){
					this.hide();
				}
			});
			clb.startup();
			
			new dijit.form.Button({
				label:"Custom Click",
				onClick: function(){
					clb.show()
				}
			}).placeAt("container");

			// and example of onClick for the image (to toggle between large/small);
			var clb2 = new dojox.image.Lightbox({
				title:"fun fun fun",
				href:"images/chris1_sm.jpg",
				onClick: function(info){
					
					this.href = info.href == "images/chris1_lg.jpg" ? "images/chris1_sm.jpg" : "images/chris1_lg.jpg";
					this.show({
						leaveTitle:true,
						href: this.href
					});
				}
			});
			clb2.startup();
			
			new dijit.form.Button({
				label:"Zoomish Click",
				onClick: function(){
					clb2.show()
				}
			}).placeAt("container");
			
			dojo.query("#groupremover").onclick(function(e){
				e.preventDefault();
				var g = dijit.byId("targetremover");
				console.warn(g);
				if(g){
					// destroying a dojox.image.Lightbox will remove itself from 
					// the LightboxDialog
					g.destroy();
				}
				
				// test showing group 3 after removal:
				var lbd = dijit.byId("dojoxLightboxDialog"); // the master
				lbd.show({
					title:"Should Only be three remaining",
					group:"group3"
				});
			})
			
			dojo.query("#groupkiller").onclick(function(e){
				e.preventDefault();
				var lbd = dijit.byId("dojoxLightboxDialog");
				lbd.removeGroup("group3");
				
				
			})
		})
	</script>

	<script type="text/javascript">
		// programatic flickrstore implementation [basic]
		function onComplete(items,request){
			if (items.length>0){
				dojo.forEach(items,function(item){
					var part = {
						title: flickrStore.getValue(item,"title"),
						href: flickrStore.getValue(item,"imageUrl")
					};
					// FIXME: make addImage more accessible, or do this internally
					// _attachedDialog is dijit.byId("dojoxLightboxDialog"), and the
					// is only one per page.
					dijit.byId('fromStore')._attachedDialog.addImage(part,"flickrStore");
				});
				dojo.byId('flickrButton').disabled = false; 
			}
		}

		function onError(error,request){
			console.warn(error,request);
		}

		function init(){
			var flickrRequest = {
				query: {},
				onComplete: onComplete,
				onError: onError,
				userid: "jetstreet",
				tags: "jetstreet",
				count: 10
			};
			flickrStore.fetch(flickrRequest);
		}
		dojo.addOnLoad(init);
	</script>


</head>
<body class="tundra">

	<div id="container" style="padding:20px;">
		<h1 class="testTitle">a Dojo based Lightbox implementation:</h1>

		<h3>Individual</h3>
		<p>
			<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" title="More Guatemala...">tall</a>
			<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" title="Antigua, Guatemala">4:3 image</a>
			<a href="images/broken.jpg" dojoType="dojox.image.Lightbox" title="broken href example">Broken link</a>
			<a href="images/huuuge.png" modal="true" dojoType="dojox.image.Lightbox" title="a large image">large than viewport?</a> (also modal, no click on underlay)
			
			<a href="images/huuuge.png" dojoType="dojox.image.Lightbox" title="a large image with a really really long multi-line-title because I can. Okay, this title has to be really really supremely long in order to occupy the full width of the viewport provided. yymv.">large than viewport, long title</a>
		</p>

		<h3>Grouped:</h3>
		<p>
			<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Amsterdam Train Depot but this title is going to be really really really really long just because">wide image, multiline title</a>
			<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group1" title="1:1 aspect">square</a>
			<a href="images/extraWide.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Greeneville, TN">wide image</a>
			<a href="images/broken.jpg" dojoType="dojox.image.Lightbox" group="group1" title="broken href example">Broken link</a>
		</p>	

		<h3>Alternate Group:</h3>	
		<p>
			<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group2" title="hmm &lt;em&gt;right&lt;/em&gt; there is &lt;b&gt;rich text&lt;/b&gt; here">Rich Text Title</a>
			<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group2" title="1:1 aspect">square</a>
			<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Antigua, Guatemala">4:3 image</a>
			<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" group="group2" title="More Guatemala...">tall</a>
		</p>

		<h3>RemoveGroup Group3:</h3>	
		<p>
			<a id="targetremover" href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group3" title="hmm &lt;em&gt;right&lt;/em&gt; there is &lt;b&gt;rich text&lt;/b&gt; here">Rich Text Title</a>
			<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group3" title="1:1 aspect">square</a>
			<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" group="group3" title="Antigua, Guatemala">4:3 image</a>
			<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" group="group3" title="More Guatemala...">tall</a>
		</p>
        <p>
                <a href='#' id="groupremover">remove one from group3, then show group</a> | <a href="#" id="groupkiller">remove group3</a>
        </p>

		<h3>From dojox.data.FlickrStore:</h3>

		<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
		<div id="fromStore" dojoType="dojox.image.Lightbox" store="flickrStore" group="flickrStore"></div>

		<input id="flickrButton" type="button" onclick="dijit.byId('fromStore').show()" value="show flickr lightbox" disabled="disabled">
	
	</div>

	<div id="customExample">
		<div id="customTitleThing">
			<p>lorem ipsum dolor amit</p>
			<p>lorem ipsum dolor amit</p>
			<p>lorem ipsum dolor amit</p>
			<p>lorem ipsum dolor amit</p>
			<p>lorem ipsum dolor amit</p>
			<p>lorem ipsum dolor amit</p>
		</div>
	</div>

</body>
</html>
